<template>
  <div class="login-box">
    <el-form ref="formRef" label-position="left" label-width="80px" :model="userInfo" :rules="rules" style="max-width: 460px">
      <el-form-item label="用户名:" prop="username">
        <el-input v-model="userInfo.username" class="input-item">
          <template #prefix>
            <el-icon class="el-input__icon">
              <iphone />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="密码:" prop="password">
        <el-input v-model="userInfo.password" class="input-item" type="password" show-password>
          <template #prefix>
            <el-icon class="el-input__icon">
              <key />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="rePwd">
        <el-input v-model="userInfo.rePwd" class="input-item" type="password" show-password>
          <template #prefix>
            <el-icon class="el-input__icon">
              <key />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <div class="goLogin">
        <div style="margin: 10px">用户名:admin为管理员身份,test为普通身份。</div>
        <el-button type="primary" style="width: 50%" @click="goLogin">登录</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import type { ElForm, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'

import { useUserInfoStore } from '@/store/modules/userInfo-store'
import { saveLocalData } from '@/utils/local'
import { goLoginAction } from '@/services/infoApi'
const formRef = ref<InstanceType<typeof ElForm>>()
const router = useRouter()
const userInfoStore = useUserInfoStore()
//拿到本地存储的数据判断用户使用记住密码
const userInfo = reactive({
  username: 'admin',
  password: '12345',
  rePwd: '12345'
})

const goLogin = () => {
  if (userInfo.password !== userInfo.rePwd) {
    ElMessage.error('两次密码输入不一致')
    return
  }
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      goLoginAction({ username: userInfo.username, password: userInfo.password }).then((res) => {
        console.log(res)
        if (res.code === 0) {
          ElMessage.success('用户登录成功')
          saveLocalData('token', res.token)
          saveLocalData('roleList', res.data)
          saveLocalData('permissionList', res.permissions)
          saveLocalData('userInfo', res.userInfo)
          //存到pinia
          userInfoStore.menu = res.data
          userInfoStore.userInfo = res.userInfo
          router.push('/main/overView/view')
        } else {
          ElMessage.error(res.message)
        }
      })
    }
  })
}

const rules = reactive<FormRules>({
  username: [{ required: true, message: '用户名为必填项', trigger: 'blur' }],
  password: [{ required: true, message: '密码为必填项', trigger: 'blur' }],
  rePwd: [{ required: true, message: '确认密码为必填项', trigger: 'blur' }]
})
</script>

<style lang="scss" scoped>
.goLogin {
  text-align: center;
}
.input-item {
  height: 45px;
}
</style>
